<template>
  <div class="list-container" ref="listRoot">
    <div class="list-item" v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDrag } from "../utils/useDrag";

interface IListItem {
  name: string;
  id: number;
}

const list = ref<IListItem[]>([
  {
    name: "jrd",
    id: 1,
  },
  {
    name: "ywk",
    id: 2,
  },
  {
    name: "zwb",
    id: 3,
  },
]);

// 给列表增加拖拽能力
const listRoot = ref();
useDrag(listRoot, list);
</script>

<style scoped>
.list-container {
  width: 300px;
}
.list-container .list-item {
  height: 50px;
  margin-bottom: 10px;
  background-image: linear-gradient(
    0deg,
    rgba(100, 100, 100, 0.5),
    rgba(200, 200, 200, 0.5)
  );
}

.moveing {
  opacity: 0;
}
</style>
